<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // Promise实例中then() catch()方法中绑定的回调函数 => 在Promise实例状态改变之后执行 => 回调函数在执行时也是异步的 => 需要等所有同步代码执行完毕才能到主线程执行

    // 1. Promise实例中then() catch()方法中绑定的回调函数在执行时也是异步的 
    // 2. 异步任务 => a. 宏任务( 计时器/延时器 ajax 事件)=> 宏任务队列  b. 微任务(p.then()  p.catch())  => 微任务队列

    // 1 2 4 6  3 5

    // Event Loop(事件轮询)
    // 1. 先执行主线程上所有的同步任务, 异步任务分为宏任务和微任务,分别放到宏任务队列和微任务队列 
    // 2. 等主线程上所有同步任务执行完毕 =>  清空微任务队列(将队列中的微任务全都执行)
    // 3. 微任务队列清空完毕 => 取执行宏任务队列首位的任务执行(执行一个宏任务)  => (考虑到宏任务在执行过程会产生新的微任务)
    // 4. 再次清空微任务队列 
    // 5. 重复 3-4   知道所有异步任务执行完毕

    // a.宏任务在执行过程会产生新的微任务  => 等宏任务执行完,在清空
    // b.微任务队列执行过程中产生了新的微任务 =>  还是在本次清空微任务队列式执行
    // c.微任务队列执行过程中产生了新的宏任务 => 放到宏任务队列 => 按流程执行(啥时候轮到它,什么时候执行)  

    // 小结: 
    // 主线程所有同步任务执行完毕 , 清空一次微任务队列
    // 每执行一个宏任务,再次清空微任务队列




    console.log(1);
    var p = new Promise(function (resolve, reject) {
        console.log(2);
        resolve(3);
    });
        
    console.log(4);

    setTimeout(function(){
        console.log(5);  // 5
    })

    p.then(function(arg){
        console.log(arg); // 3
    })

   
    console.log(6);




</script>

</html>